<template>
  <div class="newest-list">
    <el-row style="margin-top: 25px" :gutter="10">
      <template v-for="(arr, index) in newestList" :key="index">
        <el-col :span="12">
          <el-table
            :data="arr"
            @row-dblclick="dblclickPlayMusic"
            stripe
            :show-header="false"
          >
            <el-table-column type="index">
              <template #default="scope" v-if="!index">{{
                '0' + (scope.$index + 1).toString()
              }}</template>
              <template #default="scope" v-else>{{
                scope.$index >= 4
                  ? scope.$index + 6
                  : '0' + (scope.$index + 6).toString()
              }}</template>
            </el-table-column>
            <el-table-column style="position: prelative">
              <template #default="scope">
                <el-image
                  :src="$filters.formatImgSize(scope.row.picUrl, 90)"
                  @click="changeUrl(scope.row.id)"
                  style="width: 75px; height: 75px; cursor: pointer"
                ></el-image>
                <el-icon
                  @click.stop="changeUrl(scope.row.id)"
                  style="
                    position: absolute;
                    font-size: 25px;
                    bottom: 17px;
                    left: 60px;
                    z-index: 10;
                    color: orange;
                    cursor: pointer;
                  "
                >
                  <video-play></video-play>
                </el-icon>
                <span
                  style="
                    position: absolute;
                    top: 25px;
                    left: 100px;
                    font-size: 14px;
                    font-weight: 500;
                  "
                  >{{ scope.row.name }}</span
                >
                <span
                  @click="toSingerPage(scope.row)"
                  style="
                    cursor: pointer;
                    position: absolute;
                    bottom: 25px;
                    left: 108px;
                    font-size: 12px;
                    font-weight: 500;
                  "
                  >{{ scope.row.song.artists[0].name }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    newestList: {
      type: Array,
      default: () => [[], []]
    }
  },
  setup() {
    //双击
    function dblclickPlayMusic() {
      console.log('')
    }
    //点击
    function changeUrl(id: number) {
      console.log(id)
    }
    //跳转到歌手页
    function toSingerPage(row: any) {
      console.log(row)
    }
    return {
      dblclickPlayMusic,
      changeUrl,
      toSingerPage
    }
  }
})
</script>

<style scoped>
.newest-list {
  width: 96%;
}
</style>
